<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-select v-model="form.supplier_id" filterable remote placeholder="输入搜索的工厂名称" size="small"
                               :remote-method="searchFactoryBtn" :loading="searchLoading" clearable>
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.supplier_id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="form.recon_time" type="month" value-format="yyyy-MM" placeholder="对账月份" style="width: 140px" size="small" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="form.source_factory_groups_id" style="width: 100px" placeholder="选择品牌" clearable>
                        <el-option value="3090235" label="十三余"></el-option>
                        <el-option value="10010" label="有香"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="form.is_push" style="width: 100px" placeholder="推送金蝶" clearable>
                        <el-option :value=0 label="未推送"></el-option>
                        <el-option :value=1 label="已推送"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column label="品牌" prop="brand_name"></el-table-column>
                <el-table-column label="绣花厂" prop="factory_name"></el-table-column>
                <el-table-column label="对账日期" prop="recon_time"></el-table-column>
                <el-table-column label="创建时间" prop="create_time"></el-table-column>
                <el-table-column label="回货总数" prop="num"></el-table-column>
                <el-table-column label="推送金蝶" prop="status">
                    <template slot-scope="{ row }">
                        <el-tag size="mini" type="success" v-if="row.is_push == 1">已推送</el-tag>
                        <el-tag size="mini" type="info" v-else>待推送</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="{row}">
                        <el-button type="text" size="mini" @click="pushBtn(row)" class="el-icon-position" :disabled="row.is_push==1">&nbsp;推送</el-button>
                        <el-button type="text" size="mini" @click="detailBtn(row)" class="el-icon-document">&nbsp;详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--详情-->
        <el-drawer :title="detail.factory_name+' '+detail.recon_time" :visible.sync="detailVisible" size="1200px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding-left: 20px;">
                <div style="margin-top: 0px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">回货统计单</span>
                    <div style="display: inline-block;float: right">
                        <span style="font-size: 13px;font-weight: bold">回货总金额：<span style="color: #ff7171">{{detail.total_price}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">回货总数量：<span style="color: #67C23A;">{{detail.num}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                    </div>
                </div>
                <el-table :data="detail.list" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          :max-height="drawHeight" style="width: 99%;">
                    <el-table-column prop="processing_code" label="生产加工单"></el-table-column>
                    <el-table-column prop="type_no" label="款号"></el-table-column>
                    <el-table-column prop="type_name" label="款名" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="sku_code" label="sku"></el-table-column>
                    <el-table-column prop="contract_machining_price" label="绣花单价"></el-table-column>
                    <el-table-column prop="qty" label="回货数量"></el-table-column>
                    <el-table-column prop="cost_amount" label="总金额"></el-table-column>
                </el-table>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button type="primary" @click="downloadExcelBtn(detail.id)" plain>
                    <svg style="vertical-align: bottom;" t="1726296940186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4414" width="16" height="16"><path d="M595.2 755.2h128v88.32L954.88 710.4 723.2 576v89.6h-128zM266.24 134.4c0-6.4 6.4-12.8 12.8-12.8H652.8c3.84 0 7.68 0 12.8 1.28v198.4H864c1.28 5.12 1.28 29.44 1.28 33.28v252.16l49.92 30.72v-281.6c0-34.56-20.48-102.4-43.52-126.72L760.32 117.76C736 93.44 688.64 74.24 654.08 74.24H279.04c-34.56 0-62.72 28.16-62.72 62.72V262.4h49.92v-128z m449.28 10.24c3.84 2.56 6.4 5.12 8.96 7.68l111.36 111.36c2.56 2.56 5.12 5.12 7.68 8.96h-128v-128z" fill="#22975D" p-id="4415"></path><path d="M595.2 385.28H800v58.88H595.2z m270.08 503.04c0 6.4-6.4 12.8-12.8 12.8H279.04c-6.4 0-12.8-6.4-12.8-12.8v-42.24h-49.92v42.24c0 34.56 28.16 62.72 62.72 62.72h574.72c34.56 0 62.72-28.16 62.72-62.72V783.36l-49.92 29.44v75.52zM537.6 320H69.12v468.48H537.6V320zM367.36 687.36l-64-94.72-28.16 43.52h28.16v52.48H160l104.96-153.6L172.8 396.8h76.8l55.04 80.64 55.04-80.64h76.8l-92.16 138.24 104.96 153.6h-81.92z m227.84-185.6H800v58.88H595.2z" fill="#22975D" p-id="4416"></path></svg>
                    导出Excel
                </el-button>
            </div>
        </el-drawer>
    </section>
</template>

<script>
import {reconciliationDetailXhZg, reconciliationListXhZg, reconciliationPushXhZg} from "@/api/soa/reconciliation";
import {factoryList} from "@/api/produce/factory";
import {formatDate} from "@/libs/tools";

export default {
    name: "soa_xh_assess",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            searchLoading: false,
            form: {supplier_id: "",recon_time: formatDate(new Date().getTime(), "last_month"), source_factory_groups_id: ""},
            factoryList: [],

            drawHeight: window.innerHeight - 180+"px",
            detailVisible: false,
            detail: {list: [], total_price: 0},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 20, tab: 2, factory_name: name, status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            reconciliationListXhZg(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        pushBtn(row){
            this.$confirm("【绣花暂估对账单】推送金蝶, 请确认数据是否正确?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                reconciliationPushXhZg({id: row.id}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("推送成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                })
            }).catch(() => {

            });
        },
        closeBtn(){
            this.detail = {list: [], total: 0, total_price: 0};
            this.detailVisible = false;
        },
        detailBtn(row){
            this.loading = true;
            reconciliationDetailXhZg({id: row.id}).then((res) => {
                this.loading = false;
                this.detail = res.data;
                this.detailVisible = true;
            }).catch(()=>{
                this.loading = false;
            })
        },
        //导出excel
        downloadExcelBtn(id){
            this.$confirm("导出excel, 是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                window.open(`/api/tool/fileExport?type=excel&name=绣花对账单(暂估)&path=${id}`, "_self");
            }).catch(() => {

            })
        },
    },
    mounted() {
        this.getFactoryData("");
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
